<template>
  <div>
    <page-list :x-uri="uri" :doactions="doactions" :custom-components="customComponents">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs :tabs="tabs" />
        <page-header content="学员" />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-dropdown class="import-student" trigger="click" @command="menuClick">
          <el-button size="mini" type="primary">
            导入学员
            <i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="importVisible">导入附件</el-dropdown-item>
            <el-dropdown-item command="download">下载模板</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button v-auth="'exam.paper.create'" size="mini" type="primary" @click="createdDialogVisible = true">
          新增学员
        </el-button>
      </template>
      <!-- 多选操作 -->
      <template v-slot:table-button="scope">
        <el-button v-auth="'exam.paper.delete'" size="mini" @click="deletes(scope)">批量移除</el-button>
      </template>
    </page-list>
    <!--新增学员 start-->
    <created-dialog
      v-if="createdDialogVisible"
      :visible.sync="createdDialogVisible"
      :paper-id="paperId"
      @reload="reload"
    />
    <!--新增学员 end-->
    <!--导入学员 start-->
    <import-dialog
      :visible.sync="importVisible"
      :paper-id="paperId"
    />
    <!--导入学员 end-->
    <!--查看成绩 start-->
    <exam-info-drawer
      v-if="examInfoVisible"
      :visible.sync="examInfoVisible"
      :exam-info="currentExamInfo"
    ></exam-info-drawer>
    <!--查看成绩 end-->
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import PageHeader from '@/components/page-header';
import Tabs from '../tabs';
import CreatedDialog from './CreatedDialog'
import ImportDialog from './ImportDialog'
import User from '@/pages/user/student/account/components/user.vue';
import ExamStatus from './components/exam_status.vue'
import ExamTime from './components/exam_time.vue'
import ExamInfoDrawer from './ExamInfoDrawer'

export default {
  name: 'Student',
  components: {
    PageList,
    PageHeader,
    Tabs,
    CreatedDialog,
    ImportDialog,
    ExamInfoDrawer
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/exam/admin/paper/' + this.$route.params.id + '/student/list',
      tabs: [
        {
          title: '学员',
          uri: '/exam/paper/' + this.$route.params.id + '/student',
          meta: {
            permission: 'exam.paper.student'
          }
        }
      ],
      doactions: [
        {
          title: '查看成绩',
          meta: { permission: 'exam.paper.detail' },
          callback: this.examInfo,
          display({ row }) {
            return row.exam_status === 1
          }
        },
        {
          title: '移除',
          meta: { permission: 'exam.paper.detail' },
          callback: this.delete,
          display({ row }) {
            return row.exam_status === 0
          }
        }
      ],
      customComponents: {
        user: User,
        exam_time: ExamTime,
        exam_status: ExamStatus
      },
      createdDialogVisible: false, // 添加学员
      importVisible: false, // 导入学员
      examInfoVisible: false, // 查看成绩抽屉
      currentExamInfo: {}
    }
  },
  computed: {
    paperId() {
      return this.$route.params.id
    }
  },
  methods: {
    menuClick: function (command) {
      if (command === 'download') {
        window.open('/template/excel/派发试卷学员导入模板.xlsx', '_blank');
      } else {
        this.importVisible = true;
      }
    },
    // 查看成绩
    examInfo({ row }) {
      this.currentExamInfo = row
      this.examInfoVisible = true
    },
    // 移除
    delete: function ({ row }) {
      this.$box
          .confirm('确认移除吗')
          .then(() => {
            this.$http.delete(
                '/exam/admin/paper/' + this.paperId + '/student/' + row.id,
                {},
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {
          });
    },
    // 批量删除
    deletes: function ({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要移除的学员');
        return false;
      }
      ids = ids.join(',');
      this.$box
          .confirm('确认移除吗')
          .then(() => {
            this.$http.delete(
                '/exam/admin/paper/' + this.paperId + '/student/' + ids,
                {},
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {
          });
    }
  }
}
</script>

<style scoped>
.import-student {
  margin-left: 20px;
  margin-right: 20px;
}
</style>
